* {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 14px;
}

.pageFoot {
  padding: 50rem 50rem;
  background: #fafafa;
}
.pageFoot > .info {
  margin-top: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pageFoot > .info p {
  color: #999;
}
.pageFoot > .info span {
  margin: 10rem;
  color: #ddd;
}
.pageFoot > .other {
  display: flex;
  justify-content: space-between;
}
.pageFoot > .other li {
  cursor: pointer;
  width: 78rem;
  text-align: end;
  list-style: none;
}
.pageFoot > .other li:hover {
  list-style: disc;
}
.pageFoot > .fuc {
  display: flex;
  margin-bottom: 30rem;
}
.pageFoot > .fuc > div {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  padding: 10rem;
  margin: 0 10rem;
  cursor: pointer;
  position: relative;
}
.pageFoot > .fuc > div i {
  display: inline-block;
  padding: 15rem;
  font-size: 36rem;
}
.pageFoot > .fuc > div > .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.pageFoot > .fuc > div > .content p {
  font-size: 18rem;
  font-weight: bold;
}
.pageFoot > .fuc > div > .content input {
  border-style: none;
  border-bottom: 1px solid #dfdfdf;
  background: none;
  padding-bottom: 2rem;
}
.pageFoot > .fuc > div > .content input:focus {
  outline: none;
  border-bottom-color: #999;
}
.pageFoot > .fuc > div::after {
  content: "";
  height: 2px;
  width: 0%;
  background: #333;
  position: absolute;
  bottom: -1px;
  left: 0;
  transition: 0.5s;
}
.pageFoot > .fuc > div:hover {
  transition: 0.5s;
}
.pageFoot > .fuc > div:hover::after {
  width: 100%;
}

.about {
  padding: 30rem 50rem;
}
.about > .etc {
  display: flex;
  justify-content: center;
}
.about > .etc > div {
  margin: 30rem 30rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.about > .etc > div i {
  margin-left: 1rem;
  color: transparent;
}
.about > .etc > div:hover i {
  color: #666;
}
.about > .text {
  margin: 20rem 0;
  padding: 15rem;
  background-color: #fafafa;
}
.about > .text p {
  line-height: 20rem;
  color: #666;
}
.about > .text i {
  display: block;
  margin: 2rem 0;
  font-size: 30rem;
  color: #ccc;
}
.about > .text :nth-child(3) {
  text-align: end;
}
.about > .imgBox {
  display: flex;
}
.about > .imgBox .img {
  flex: 1;
  margin: 0 5rem;
  position: relative;
}
.about > .imgBox .img img {
  width: 100%;
}
.about > .imgBox .img > div {
  position: absolute;
  left: 10rem;
  bottom: 10rem;
}
.about > .imgBox .img > div p {
  color: #fff;
  font-weight: bold;
  font-size: 16rem;
}
.about > .desc {
  margin: 50rem 0;
  display: flex;
  justify-content: center;
}
.about > .desc > div {
  margin: 0 50rem;
}
.about > .desc > div p {
  font-size: 18rem;
}
.about > .desc > div span {
  font-size: 10rem;
  color: #999;
}
.about > .desc > div > div {
  display: flex;
  align-items: flex-end;
  margin: 15rem 0;
}
.about > .desc > div > div h1 {
  font-size: 50rem;
  line-height: 40rem;
  background: linear-gradient(40deg, #41aed3 20%, #2c59eb 50%, #fd6585 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8rem;
}
.about > .title {
  font-size: 30rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about > .title span {
  font-weight: normal;
  color: #666;
  margin: 0 10rem;
}

.pattern {
  padding: 30rem 50rem;
  background-color: #fafafa;
}
.pattern > .top {
  display: flex;
}
.pattern > .top > .left {
  display: flex;
  flex: 2;
  flex-direction: column;
  border-right: 1px solid #999;
}
.pattern > .top > .left > .bar .active {
  background-color: #EEE;
}
.pattern > .top > .left > .bar .active .long .s {
  border-color: #333 !important;
}
.pattern > .top > .left > .bar .box {
  display: flex;
  padding: 5rem 0;
  align-items: center;
}
.pattern > .top > .left > .bar .box:hover {
  background-color: #EEE;
}
.pattern > .top > .left > .bar .box:hover .long .s {
  border-color: #333;
}
.pattern > .top > .left > .bar .box div {
  font-size: 12px;
}
.pattern > .top > .left > .bar .box .border {
  background-color: #fafafa;
  padding: 2rem 3rem;
  border: 1px solid #333;
}
.pattern > .top > .left > .bar .box .border:nth-child(2) {
  border-left: none;
}
.pattern > .top > .left > .bar .box .name {
  width: 80rem;
  padding-left: 5rem;
}
.pattern > .top > .left > .bar .box .long {
  width: 100%;
  height: 20rem;
  box-sizing: border-box;
  border-left: none;
  display: flex;
}
.pattern > .top > .left > .bar .box .long .z {
  box-sizing: border-box;
  height: 100%;
  background-color: #333;
}
.pattern > .top > .left > .bar .box .long .s {
  flex: 1;
  border: 1rem solid #EEE;
  border-left: none;
  background-color: #EEE;
}
.pattern > .top > .left > .bar .box .count {
  width: 22rem;
  text-align: center;
  margin-left: 15rem;
  margin-right: 70rem;
}
.pattern > .top > .left > .table .row {
  display: flex;
}
.pattern > .top > .left > .table .row .active {
  background-color: #333;
  color: #fff;
}
.pattern > .top > .left > .table .row div {
  width: 105rem;
  height: 28rem;
  border: 1px solid #333;
  text-align: center;
  line-height: 28rem;
  margin: 0 10rem 10rem 0;
  position: relative;
  cursor: default;
}
.pattern > .top > .left > .table .row div::after {
  display: block;
  content: "";
  height: 0px;
  width: 0px;
  border: 6px solid transparent;
  border-bottom-color: #fafafa;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
}
.pattern > .top > .left > .table .row div:hover {
  background-color: #333;
  color: #fff;
}
.pattern > .top > .left > .desc {
  display: flex;
  align-items: center;
  margin: 35rem 0;
}
.pattern > .top > .left > .desc h1 {
  font-size: 40rem;
  font-weight: bold;
}
.pattern > .top > .left > .desc > span {
  margin: 0 15rem;
}
.pattern > .top > .left > .desc > div p {
  font-weight: bold;
  font-size: 18px;
}
.pattern > .top > .left > p {
  font-size: 30rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.pattern > .top > .left > p span {
  margin: 0 10rem;
  color: #aaa;
}
.pattern > .top > .left > p i {
  font-size: 30px;
  margin-right: 10rem;
}
.pattern > .top > .right {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.pattern > .top > .right > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pattern > .top > .right > div:nth-child(2) .imgBox > p {
  font-size: 12px;
  text-align: start;
}
.pattern > .top > .right > div:nth-child(2) .imgBox .img {
  height: 206rem;
  overflow: hidden;
  border-radius: 2rem;
}
.pattern > .top > .right > div:nth-child(2) .imgBox .img img {
  height: 100%;
  transition: 0.5s;
}
.pattern > .top > .right > div:nth-child(2) .imgBox .img:hover img {
  transition: 0.5s;
  transform: scale(1.1);
}
.pattern > .top > .right .text {
  padding: 0;
  display: flex;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  justify-content: space-between;
  align-items: center;
  margin-left: 25rem;
}
.pattern > .top > .right .text p {
  font-size: 14px;
}
.pattern > .top > .right .text p i {
  margin-bottom: 4rem;
}
.pattern > .top > .right .text span {
  display: inline-block;
  font-size: 10rem;
  color: #bbb;
}
.pattern > .bot {
  display: flex;
  justify-content: space-between;
  margin-top: 30rem;
}
.pattern > .bot .img {
  width: 200rem;
  height: 200rem;
  overflow: hidden;
}
.pattern > .bot .img img {
  transition: 0.5s;
  width: 100%;
}
.pattern > .bot .img:hover img {
  transition: 0.5s;
  transform: scale(1.05);
}
.pattern > .foot {
  display: flex;
  align-items: center;
  margin-top: 30rem;
}
.pattern > .foot > div {
  margin: 0 30rem;
  height: 1.5rem;
  width: 100%;
  background-color: #333;
}

.color {
  padding: 50rem;
}
.color > .top {
  display: flex;
}
.color > .top > .left {
  flex: 2;
  border-right: 1rem solid #333;
  padding-right: 15rem;
}
.color > .top > .left .titleBox {
  display: flex;
  align-items: center;
  position: relative;
}
.color > .top > .left .titleBox > span {
  line-height: 40rem;
  font-size: 20rem;
  position: absolute;
  right: 0;
  top: 0;
  font-family: "Arial Black";
}
.color > .top > .left .titleBox p {
  font-size: 30rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.color > .top > .left .titleBox p span {
  font-size: 12rem;
  margin: 0 10rem;
  color: #999;
}
.color > .top > .left .titleBox div span {
  display: block;
  color: #999;
  font-size: 12rem;
}
.color > .top > .left .titleBox div span:nth-child(2) {
  font-weight: bold;
  color: #333;
  margin-top: 4rem;
}
.color > .top > .left .colorBar {
  margin-top: 30rem;
  display: flex;
  flex-direction: row-reverse;
}
.color > .top > .left .colorBar .item.active {
  align-items: flex-start;
  flex: 9;
}
.color > .top > .left .colorBar .item.active h1 {
  margin-left: 30rem;
  font-size: 30rem;
  -ms-writing-mode: unset;
      writing-mode: unset;
}
.color > .top > .left .colorBar .item.active span {
  margin-left: 30rem;
  -ms-writing-mode: unset;
      writing-mode: unset;
  font-size: 18rem;
}
.color > .top > .left .colorBar .item.active p {
  margin-left: 30rem;
  font-size: 40rem;
  color: #eee;
  opacity: 1;
}
.color > .top > .left .colorBar .item {
  flex: 1;
  height: 220rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.color > .top > .left .colorBar .item h1, .color > .top > .left .colorBar .item span {
  color: #eee;
  margin: 15rem 0;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  font-size: 12rem;
}
.color > .top > .left .colorBar .item span {
  font-size: 10rem;
}
.color > .top > .left .colorBar .item p {
  color: #eee;
  opacity: 0;
}
.color > .top > .left .colorBar .item:hover {
  flex: 9;
  align-items: flex-start;
  flex: 9;
}
.color > .top > .left .colorBar .item:hover ~ .active {
  flex: 1;
  align-items: center;
}
.color > .top > .left .colorBar .item:hover ~ .active h1, .color > .top > .left .colorBar .item:hover ~ .active span, .color > .top > .left .colorBar .item:hover ~ .active p {
  margin-left: 0;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  color: #eee;
  margin: 15rem 0;
  font-size: 12rem;
}
.color > .top > .left .colorBar .item:hover ~ .active p {
  opacity: 0;
}
.color > .top > .left .colorBar .item:hover h1 {
  -ms-writing-mode: unset;
      writing-mode: unset;
  margin-left: 30rem;
  font-size: 30rem;
}
.color > .top > .left .colorBar .item:hover span {
  -ms-writing-mode: unset;
      writing-mode: unset;
  margin-left: 30rem;
  font-size: 18rem;
}
.color > .top > .left .colorBar .item:hover p {
  margin-left: 30rem;
  font-size: 40rem;
  color: #eee;
  opacity: 1;
}
.color > .top > .right {
  flex: 1;
  display: flex;
}
.color > .top > .right .imgRight > p {
  font-size: 14px;
  margin-top: 30rem;
}
.color > .top > .right .imgRight .img {
  height: 206rem;
  overflow: hidden;
  border-radius: 2rem;
}
.color > .top > .right .imgRight .img img {
  width: 100%;
  transition: 0.5s;
}
.color > .top > .right .imgRight .img:hover img {
  transition: 0.5s;
  transform: scale(1.1);
}
.color > .top > .right .text {
  padding: 0;
  display: flex;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  justify-content: space-between;
  align-items: center;
}
.color > .top > .right .text p {
  font-size: 14px;
}
.color > .top > .right .text span {
  display: inline-block;
  font-size: 10rem;
  color: #bbb;
  margin: 0 25rem;
  padding-bottom: 24rem;
}
.color > .bot {
  width: 100%;
  margin: 20rem 0 0 0;
  display: flex;
  justify-content: space-between;
}
.color > .bot > .show {
  display: flex;
}
.color > .bot > .show .img {
  width: 177rem;
  height: 287rem;
  margin-right: 20rem;
  overflow: hidden;
}
.color > .bot > .show .img img {
  position: relative;
  left: -22rem;
  height: 100%;
  transition: 0.3s;
}
.color > .bot > .show .img img:hover {
  transition: 0.3s;
  transform: scale(1.05);
}
.color > .bot > .more {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.color > .bot > .more p {
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  font-weight: bold;
}
.color > .bot > .more p i {
  display: inline-block;
  transform: rotate(180deg);
}
.color > .bot > .more p span {
  color: #aaa;
  font-size: 14px;
  font-weight: normal;
}
.color > .bot > .more > div {
  height: 60rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.color > .bot > .more > div i {
  color: #999;
  font-size: 14px;
}

.week {
  background: #fafafa;
  padding: 50rem 50rem 30rem 50rem;
  display: flex;
  justify-content: space-between;
}
.week > .left .title p {
  font-size: 36rem;
  font-weight: bold;
  margin-bottom: 10rem;
}
.week > .left .title span {
  display: block;
}
.week > .left .box {
  cursor: default;
  margin: 50rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.week > .left .box > div {
  width: 129rem;
  padding: 10rem 0;
  position: relative;
}
.week > .left .box > div p {
  font-size: 16px;
}
.week > .left .box > div span {
  font-size: 10rem;
  color: #666;
}
.week > .left .box > div::after {
  content: "";
  display: block;
  transition: 0.3s;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2rem;
  width: 0rem;
  background-color: #333;
}
.week > .left .box i {
  opacity: 0;
}
.week > .left .box:hover > div::after {
  width: 129rem;
}
.week > .left .box:hover p {
  font-weight: bold;
}
.week > .left .box:hover i {
  opacity: 1;
}
.week > .left > :nth-child(2) div::after {
  width: 100%;
  background-color: #333;
}
.week > .left > :nth-child(2) div p {
  font-weight: bold;
}
.week > .left > :nth-child(2) i {
  opacity: 1;
}
.week > .right {
  width: 1000rem;
}
.week > .right .content {
  display: flex;
}
.week > .right .content .box {
  width: 174rem;
  height: 301.5rem;
  margin-right: 28rem;
  position: relative;
  background-color: #333;
}
.week > .right .content .box > p {
  background-color: #fafafa;
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 12rem;
  line-height: 50rem;
  text-align: center;
  color: #bbb;
}
.week > .right .content .box .top {
  border: 1rem solid #bbb;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.3s;
}
.week > .right .content .box .top p {
  background-color: #fafafa;
  padding-top: 10rem;
  font-size: 10rem;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  line-height: 24rem;
  color: #bbb;
}
.week > .right .content .box .top .img {
  width: 150rem;
  height: 250rem;
  overflow: hidden;
}
.week > .right .content .box .top .img img {
  position: relative;
  left: -15rem;
  transition: 0.6s;
  height: 100%;
}
.week > .right .content .box:hover .top {
  transition: 0.3s;
  left: -10rem;
  top: -10rem;
  border: 1rem solid #333;
}
.week > .right .content .box:hover .top img {
  transition: 0.6s;
  transform: scale(1.05);
}
.week > .right .content .box:hover p {
  color: #333;
}
.week > .right .content .conBox .box {
  margin-right: 0;
}
.week > .right .content .contentTitle {
  display: inline-block;
  font-size: 18rem;
  font-weight: bold;
  margin-bottom: 20rem;
}
.week > .right .title {
  font-size: 12rem;
  width: 700rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rem;
}

.trend {
  padding: 30rem 50rem;
}
.trend .content {
  margin-top: 30rem;
  display: flex;
  justify-content: space-between;
}
.trend .content > .left {
  width: 600rem;
}
.trend .content > .left > .top {
  border-left: 4rem solid;
  -o-border-image: linear-gradient(0deg, #fd6585, #0d25d9) 1;
     border-image: linear-gradient(0deg, #fd6585, #0d25d9) 1;
  display: flex;
  align-items: flex-end;
}
.trend .content > .left > .top .right {
  font-size: 14px;
}
.trend .content > .left > .top .right :nth-child(2) {
  line-height: 34rem;
  border-bottom: 2rem solid #bbb;
  position: relative;
  cursor: pointer;
}
.trend .content > .left > .top .right :nth-child(2)::after {
  display: inline-block;
  height: 2.5rem;
  position: absolute;
  left: 0;
  bottom: -2rem;
  content: "";
  width: 0;
  background-color: #333;
  transition: width 0.5s;
}
.trend .content > .left > .top .right :nth-child(2):hover::after {
  width: 100%;
}
.trend .content > .left > .top .right :nth-child(1) {
  font-size: 16px;
  font-weight: bold;
}
.trend .content > .left > .top .left {
  margin: 0 40rem;
}
.trend .content > .left > .top .left h1 {
  font-weight: normal;
  font-size: 60rem;
  margin-bottom: 2rem;
}
.trend .content > .left > .center {
  font-size: 12rem;
  color: #bbb;
  padding: 50rem 0;
  margin-bottom: 50rem;
  border-bottom: 1rem solid #bbb;
}
.trend .content > .left > .bot {
  color: #888;
}
.trend .content > .left > .bot .table {
  margin-top: 20rem;
  display: flex;
}
.trend .content > .left > .bot .table .tableBox {
  box-sizing: border-box;
  width: 100rem;
  padding: 10rem;
  margin-right: 10rem;
  border: 1rem solid #ccc;
  background: url("https://staticf3.pop-fashion.com/static/images/home/v2/png_nor_bg.png") no-repeat 50%/100%;
}
.trend .content > .left > .bot .table .tableBox > span {
  margin-top: 56rem;
}
.trend .content > .left > .bot .table .tableBox div p {
  margin-bottom: 2rem;
}
.trend .content > .left > .bot .table .tableBox.first {
  color: #333;
  border-color: #333;
  background: url("https://staticf3.pop-fashion.com/static/images/home/v2/png_sel_bg.png") no-repeat 50%/100%;
}
.trend .content > .left > .bot .table .tableBox:hover {
  color: #333;
  border-color: #333;
  background: url("https://staticf3.pop-fashion.com/static/images/home/v2/png_sel_bg.png") no-repeat 50%/100%;
}
.trend .content > .left > .bot .table p {
  font-weight: bold;
}
.trend .content > .left > .bot .table span {
  display: block;
  font-size: 12rem;
}
.trend .content > .left > .bot .title {
  color: #666;
  font-size: 14rem;
}
.trend .content > .right {
  border-bottom: 1rem solid #333;
  width: 550rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.trend .content > .right .desc {
  width: 100%;
  padding-bottom: 35rem;
}
.trend .content > .right .desc .second {
  font-size: 14rem;
}
.trend .content > .right .desc .second i {
  display: inline-block;
  margin-left: 4rem;
}
.trend .content > .right .desc .first {
  display: flex;
  justify-content: space-between;
}
.trend .content > .right .desc .first > div {
  display: flex;
  align-items: center;
}
.trend .content > .right .desc .first > div p {
  font-size: 24rem;
  margin-bottom: 4rem;
}
.trend .content > .right .desc .first > div span {
  margin: 0 10rem;
}
.trend .content > .right .desc .first div:nth-child(2) i {
  font-size: 26rem;
}
.trend .content > .right .img {
  width: 500rem;
  height: 312rem;
  box-shadow: 50rem 50rem 0 0 rgba(170, 170, 170, 0.5647058824);
  overflow: hidden;
}
.trend .content > .right .img img {
  width: 100%;
  transition: 0.5s;
}
.trend .content > .right .img img:hover {
  transform: scale(1.1);
  transition: 0.5s;
}
.trend .trendTimeLine {
  color: #bbb;
  font-size: 14rem;
  display: flex;
  justify-content: end;
}
.trend .trendTimeLine div {
  height: 40rem;
  border-bottom: 2rem solid #bbb;
}
.trend .trendTimeLine div p {
  display: inline-block;
  line-height: 40rem;
}
.trend .trendTimeLine div p:nth-of-type(1) {
  color: #333;
  border-bottom: 2rem solid #333;
}
.trend .trendTimeLine div p:hover {
  color: #333;
  cursor: pointer;
}
.trend .trendTimeLine div span {
  margin: 0 30rem;
}
.trend .trendTitle {
  width: 330rem;
}
.trend .trendTitle p {
  font-size: 12rem;
  margin: 10rem 0;
}
.trend .trendTitle h1 {
  font-size: 30rem;
  display: flex;
  align-items: center;
}
.trend .trendTitle h1 span {
  font-size: 16rem;
  font-weight: normal;
  margin: 0 10rem;
}

.blackBg {
  background: linear-gradient(120deg, #000, #434343, #000);
  padding: 0 50rem;
  padding-bottom: 30rem;
}
.blackBg .table {
  width: 100%;
  height: 270rem;
  background: #fff;
  display: flex;
  margin-top: 30rem;
  font-size: 14rem;
}
.blackBg .table .right {
  padding: 15rem;
  width: 100%;
  box-sizing: border-box;
}
.blackBg .table .right .content {
  margin-top: 10rem;
  display: flex;
  justify-content: space-around;
}
.blackBg .table .right .content .contentBox div {
  overflow: hidden;
}
.blackBg .table .right .content .contentBox div img {
  height: 150rem;
  transition: 0.3s;
}
.blackBg .table .right .content .contentBox div img:hover {
  transform: scale(1.1);
  transition: 0.3s;
}
.blackBg .table .right .content .contentBox p {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blackBg .table .right .content .contentBox p i {
  font-size: 30rem;
  background: linear-gradient(150deg, #fab2ff 40%, #72edf2 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blackBg .table .right .content .contentBox span {
  font-size: 12rem;
  color: #aaa;
}
.blackBg .table .right .title {
  display: flex;
  justify-content: space-between;
}
.blackBg .table .right .title .rightTitle {
  display: flex;
  align-items: center;
}
.blackBg .table .right .title .rightTitle i {
  font-size: 20rem;
}
.blackBg .table .right .title .rightTitle i:nth-of-type(1) {
  color: #ccc;
}
.blackBg .table .right .title .rightTitle i:nth-of-type(2) {
  margin: 0 10rem;
}
.blackBg .table .right .title .rightTitle span {
  text-decoration: underline;
}
.blackBg .table .right .title .leftTitle {
  display: flex;
  line-height: 28rem;
}
.blackBg .table .right .title .leftTitle p {
  margin-left: 10rem;
  padding: 0 12rem;
  border: 1rem solid #333;
  line-height: 26rem;
  background: linear-gradient(90deg, rgba(144, 247, 236, 0.1882352941), rgba(50, 204, 188, 0.1882352941));
}
.blackBg .table .right .title .leftTitle p i {
  font-size: 14rem;
  margin-right: 4rem;
}
.blackBg .table .left {
  width: 150rem;
  border-right: 1rem solid #333;
  display: flex;
  flex-direction: column;
}
.blackBg .table .left p {
  width: 100%;
  flex: 1;
  border-bottom: 1rem solid #333;
  text-align: center;
  line-height: 45rem;
}
.blackBg .table .left p:first-child {
  background: #333;
  color: #fff;
}
.blackBg .table .left p:nth-last-child(1) {
  border: none;
}
.blackBg .table .left p:hover {
  background: #333;
  color: #fff;
  cursor: pointer;
}
.blackBg .bigImg {
  display: flex;
  margin-top: 30rem;
  border-left: 1rem solid #fff;
  justify-content: space-between;
}
.blackBg .bigImg .left {
  margin-left: 30rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blackBg .bigImg .left h1:nth-of-type(1) {
  background: linear-gradient(30deg, #fab2ff, #72edf2);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blackBg .bigImg .left > div p {
  padding-bottom: 10rem;
  font-size: 12rem;
  color: rgba(255, 255, 255, 0.5019607843);
}
.blackBg .bigImg .left > div h1 {
  color: #fff;
  margin: 10rem 0;
  font-size: 42rem;
}
.blackBg .bigImg .left img {
  align-self: flex-start;
  height: 50rem;
  border-radius: 4rem;
}
.blackBg .bigImg .right img {
  height: 340rem;
  border-radius: 2rem;
}
.blackBg .title .tab {
  margin: 10rem 0;
  display: flex;
  justify-content: space-between;
}
.blackBg .title .tab p {
  color: #fff;
  line-height: 40rem;
  font-size: 14rem;
}
.blackBg .title .tab p:nth-child(1) {
  border-bottom: 1rem solid #fff;
  box-sizing: border-box;
}
.blackBg .title .tab p:hover {
  border-bottom: 1rem solid #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.blackBg .title .top {
  height: 64rem;
  display: flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blackBg .title .top .name {
  color: #fff;
  font-weight: bold;
  font-size: 30rem;
  line-height: 60rem;
}
.blackBg .title .top .name i {
  color: #fff;
  font-size: 32rem;
  margin-right: 2rem;
}
.blackBg .title .top .desc p {
  color: #fff;
  font-size: 12rem;
}
.blackBg .title .top .desc span {
  font-size: 12rem;
  color: #999;
}
.blackBg .title .top .searchMethod {
  display: flex;
}
.blackBg .title .top .searchMethod .img {
  width: 40rem;
  display: flex;
  background: #555;
  border-radius: 8rem;
  background-color: #555;
  align-items: center;
  justify-content: center;
  margin: 0 5rem;
}
.blackBg .title .top .searchMethod .img i {
  color: #fff;
  font-size: 22rem;
  background: linear-gradient(30deg, #eead92, #c2ffd8, #6018dc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  font-weight: bold;
}
.blackBg .title .top .searchMethod .img .icon-skin {
  background: linear-gradient(30deg, #f5db80, #ee9ae5, #5312d6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blackBg .title .top .searchMethod .search {
  color: #fff;
  height: 40rem;
  padding: 0 15rem;
  line-height: 40rem;
  background-color: #555;
  border-radius: 8rem;
  display: flex;
}
.blackBg .title .top .searchMethod .search input {
  border-radius: 8rem;
  line-height: 32rem;
  font-size: 14rem;
  background: none;
  color: white;
  border: none;
  margin-left: 10rem;
}
.blackBg .title .top .searchMethod .search input:focus {
  outline: none;
}
.blackBg .title .top .searchMethod .search input::-webkit-input-placeholder {
  color: #999;
}
.blackBg .title .top .searchMethod .search i {
  color: #fff;
  margin-right: 5rem;
}
.blackBg .title .top .searchMethod .search p {
  font-size: 16rem;
  color: #fff;
}
.blackBg .title .top .download {
  font-size: 12rem;
  color: #fff;
}
.blackBg .title .top .download i {
  margin-right: 4rem;
  font-size: 16rem;
  background: linear-gradient(60deg, #f0ff00, #c2ffd8, #465efb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blackBg .title .top .login {
  color: #fff;
  font-size: 14rem;
}/*# sourceMappingURL=index.css.map */